import React, { useState, useContext, useEffect } from "react";

import styless from "./Insurance.module.scss"
import Loading from "@/component/loading/loading";
import { useRef } from "react";

import colors from "@/api/color";
const ColoredDots = ({
    itemNames = [],
    loading = false,
    style,
    data = [],
    btn = [],
    hideBtn,
    title,
    hideHeader = false,
    hideDownBtn = true,
    downType = "",
}) => {

    const [current, setCurrent] = useState(0);
    const [list, setList] = useState([])
    useEffect(() => {
        setList(data[current].value)
    }, [current, data])






    // 下载弹框的控制
    const onRef = useRef(null)

    const downClick = () => {
        console.log("当前可用的数据：", data, btn,)
        onRef.current.setOpen(true)
    }








    return (
        <>
            <div className={styless.card} style={{ ...style }}>
                <Loading loading={loading}>
                    <div className={styless.card_center} style={{ height: "100%" }}>
                        {
                            hideHeader ? null : <div className={styless.cardHeader}>
                                <span className={styless.header_title}>
                                    <span className={styless.header_title_word}>{title}</span>
                                </span>
                                <span className={styless.header_more}>
                                    <span className={styless.header_title_Btn}>
                                        {
                                            hideBtn ? null :
                                                <>
                                                    {
                                                        data.map((item, index) => {
                                                            return (
                                                                <span key={index} onClick={() => setCurrent(index)} className={current === index ? (styless.btnActive) : (styless.switchBtn)}>{item.name}</span>
                                                            )
                                                        })
                                                    }


                                                </>
                                        }
                                        {
                                            hideDownBtn ? null : <span className={styless.downBtn} onClick={() => downClick()}>下载</span>
                                        }

                                    </span>
                                </span>
                            </div>
                        }

                        <div className={styless.center_info}>
                            {
                                list.map((item, index) => {
                                    return (
                                        <div className={styless.item} key={index}>
                                            <div className={styless.item_center}>
                                                <div className={styless.item_center_box} style={{ backgroundColor: colors[index] }}></div>
                                            </div>
                                            <div className={styless.item_word}>
                                                <div className={styless.item_value}>{item}</div>
                                                <div className={styless.item_label}>{itemNames[index]}</div>
                                            </div>
                                        </div>
                                    )
                                })
                            }

                        </div>
                    </div>
                </Loading>

            </div>
        </>
    )
}
export default ColoredDots;